import paper from 'paper'

const local = {
  path: null,
  show: null,
  segment: null,
  line: null,
  movePoint: null,
  count: 0,
  isDraged: false,
}

const moveOptions = {
  match: (hitResult) => {
    if (hitResult && hitResult.item && hitResult.item.markType === 'point1') {
      return true
    }
    return false
  },
  segments: true,
  stroke: true,
  tolerance: 2,
}

const clickOptions = {
  match: (hitResult) => {
    if (hitResult && hitResult.item && hitResult.item.markType === 'point1') {
      return true
    }
    return false
  },
  stroke: true,
  tolerance: 2,
}

const pointNormalSize = 4
const pointExpandSize = 12

const onMouseMove = (event) => {
  document.querySelector('body').style.cursor = 'crosshair'
  local.movePoint = null
  let hitResult = paper.project.hitTest(event.point, moveOptions)
  paper.project.activeLayer.children.forEach((child) => {
    if (child.markType === 'point1') {
      child.strokeWidth = pointNormalSize
    }
  })
  if (hitResult) {
    hitResult.item.strokeWidth = pointExpandSize
    local.movePoint = hitResult.item
  }
}

const onMouseDown = (event) => {
  local.isDraged = false
  if (event.event.buttons == 1) {
    if (!local.movePoint) {
      const point = new paper.Path()
      point.add(event.point)
      point.markType = 'point1'
      point.strokeCap = 'round'
      point.strokeColor = 'red'
      point.selectedColor = 'red'
      point.strokeScaling = false
      point.strokeWidth = pointNormalSize
      point.opacity = 1
      point.closed = true
      local.path = point
      local.path.toDBObject = function () {
        let labels = {
          a1: this.a1,
          a2: this.a2,
          a3: this.a3,
          a4: this.a4,
          a5: this.a5,
          a6: this.a6,
          a7: this.a7,
          a8: this.a8,
          b1: this.b1,
          b2: this.b2,
          b3: this.b3,
          b4: this.b4,
          b5: this.b5,
          b6: this.b6,
          b7: this.b7,
          b8: this.b8,
        }
        labels = JSON.stringify(labels)
        let x = ''
        let y = ''
        let z = 'point1'
        this.segments.forEach((element) => {
          let tmpPoint = globalToLocal(element.point)
          x += tmpPoint.x.toFixed(2) + ';'
          y += tmpPoint.y.toFixed(2) + ';'
        })
        const ret = {
          mMarkAnnotationId: null,
          mQaResultId: this.mQaResultId,
          name: this.labelName,
          x: x,
          y: y,
          z: z,
          a1: this.a1,
          a2: this.a2,
          a3: this.a3,
          a4: this.a4,
          a5: this.a5,
          a6: this.a6,
          a7: this.a7,
          a8: this.a8,
          b1: this.b1,
          b2: this.b2,
          b3: this.b3,
          b4: this.b4,
          b5: this.b5,
          b6: this.b6,
          b7: this.b7,
          b8: this.b8,
          labels: labels,
          fileType: '2d',
          fileName: this.fileName,
        }
        return ret
      }
      local.path.fileName = paper.project.fileName
      local.path.mQaResultId = paper.project.mQaResultId
    }
  }
}

const onMouseDrag = (event) => {
  if (event.event.buttons == 2) {
    if (paper.project.activeLayer.rasterLayer) {
      paper.project.activeLayer.rasterLayer.position.x += event.delta.x
      paper.project.activeLayer.rasterLayer.position.y += event.delta.y
      paper.project.activeLayer.position.x += event.delta.x
      paper.project.activeLayer.position.y += event.delta.y
      local.isDraged = true
    }
  } else {
    if (local.movePoint && !local.movePoint.mMarkAnnotationId) {
      local.movePoint.segments[0].point.x += event.delta.x
      local.movePoint.segments[0].point.y += event.delta.y
    }
  }
}

const onMouseUp = (event) => {
  if (!local.isDraged && event.event.button != 2 && !local.movePoint) {
    if (tool.newMarkEvent) {
      tool.newMarkEvent(local.path, function (params) {
        if (params.ret !== 'confirm') {
          let line = params.form.instance
          line.remove()
        }
      })
    }
  }

  local.isDraged = false
}

const onToggleIn = () => {}
const onToggleOut = () => {
  if (local.show) local.show.remove()
  local.show = null
}

function globalToLocal(point) {
  return paper.project.activeLayer.rasterLayer.globalToLocal(point)
}

export const tool = new paper.Tool()
tool.onMouseDown = onMouseDown
tool.onMouseDrag = onMouseDrag
tool.onMouseUp = onMouseUp
tool.onMouseMove = onMouseMove
tool.onToggleIn = onToggleIn
tool.onToggleOut = onToggleOut
